<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>数据转换器</title>
        <link rel="stylesheet" href="//mirror.fe80.cn/layui/2.6.8/css/layui.css">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    </head>
<body>
    <hr>
    <div class="layui-row">
        <div class="layui-col-md6">
            <form class="layui-form" action="#" onsubmit="return false">
                <div class="layui-form-item">
                    <label class="layui-form-label">时间戳转换</label>
                    <div class="layui-input-block">
                        <input type="text" name="timestamp" lay-verify="timestamp" autocomplete="off" placeholder="请输入时间戳" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">时间转换戳</label>
                    <div class="layui-input-block">
                        <input type="text" name="datetime001" class="layui-input" id="datetime001" placeholder="请输入日期">
                        <!-- <input type="datetime" name="datetime" lay-verify="datetime" autocomplete="off" placeholder="请输入时间" class="layui-input"> -->
                    </div>
                </div>

                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">RGB转换</label>
                    <div class="layui-input-block">
                        <input type="text" name="rgb" lay-verify="rgb" autocomplete="off" placeholder="请输入RGB，空格分开" class="layui-input">
                    </div>
                </div>

                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">MD5加密</label>
                    <div class="layui-input-block">
                        <input type="text" name="md5" lay-verify="md5" autocomplete="off" placeholder="请输入待加密的字符" class="layui-input">
                    </div>
                </div>

                <hr>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">Base64转换</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="base64" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                        <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="reset">清空</button>
                        <a href="nginxconf.html" class="layui-btn layui-btn-primary">Nginx配置生成</a>
                        <a href="contrast.html" class="layui-btn layui-btn-primary">数据对比</a>
                        <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-md6">
            <!-- <div class="grid-demo">50%</div> -->
            <div class="" id="result" style="padding:8px;">

            </div>
        </div>
    </div>
    <hr>
<script src="https://mirror.fe80.cn/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="//mirror.fe80.cn/layui/2.6.8/layui.js" charset="utf-8"></script>
<script>
var tool = {};
// 时间戳转换为日期时间
tool.stamp2datetime = function(inputTime,n=1000){
    var date = new Date(inputTime*n);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;
    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
}
// layui.config({
//     base: '/static/js/' //假设这是你存放拓展模块的根目录
// }).extend({ //设定模块别名
//     // md5: 'md5', //如果 mymod.js 是在根目录，也可以不用设定别名
//     md5: 'layui.md5' //相对于上述 base 目录的子目录
// });

layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form,layer = layui.layer,$=layui.jquery,laydate = layui.laydate;
    var now = parseInt((new Date()).getTime()/1000);
    $("input[name='timestamp']").val(now);
    //监听提交
    form.on('submit(demo1)', function(data){
        console.log(data.field);
        if(data.field.timestamp&&data.field.timestamp>100){
            let datetime = tool.stamp2datetime($.trim(data.field.timestamp));
            $("#result").append('<blockquote class="layui-elem-quote layui-quote-nm">'+datetime+'</blockquote>');
        }else{
            console.log("时间戳不正确");
        }
        if(data.field.datetime001 && data.field.datetime001.length > 8){
            var dstr = data.field.datetime001.replace(/-/g,'/');
            var date1 = new Date(dstr);
            var time1 = date1.getTime() / 1000;
            $("#result").append('<blockquote class="layui-elem-quote layui-quote-nm">'+time1+'</blockquote>');
        }else{
            console.log('日期为空');
        }
        if(data.field.rgb&&data.field.rgb.length>0){
            let rgbs = data.field.rgb.split(" ");
            let rl = rgbs.length;
            if(rl == 1 && data.field.rgb.length == 6){
                let g = data.field.rgb;
                let g1 = parseInt(g.substring(0,2),16);
                let g2 = parseInt(g.substring(2,4),16);
                let g3 = parseInt(g.substring(4,6),16);
                console.log(g1,g2,g3);
                $("#result").append('<blockquote class="layui-elem-quote layui-quote-nm">'+g1+','+g2+','+g3+'</blockquote>');
            }
            if(rl!=3){
                rgbs = data.field.rgb.split(",");
            }
            if(rl==3){
                let a = parseInt(rgbs[0]).toString(16);
                let b = parseInt(rgbs[1]).toString(16);
                let c = parseInt(rgbs[2]).toString(16);
                if(a.length==1) a = "0"+a;
                if(b.length==1) b = "0"+b;
                if(c.length==1) c = "0"+c;
                $("#result").append('<blockquote class="layui-elem-quote layui-quote-nm">'
                    + JSON.stringify(rgbs) +"&nbsp;&nbsp;&nbsp;--->&nbsp;&nbsp;&nbsp;" + a + b + c + '</blockquote>');
            }else{
                console.log("RGB长度错误");
            }
        }else{
            console.log("base64为空");
        }

        if(data.field.md5&&data.field.md5.length>0){
            $("#result").append('<blockquote class="layui-elem-quote layui-quote-nm">'+CryptoJS.MD5(data.field.md5).toString().toUpperCase()+'</blockquote>');
        }else{
            console.log("md5为空");
        }

        if(data.field.base64&&data.field.base64.length>0){
            let base64s = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(data.field.base64));
            $("#result").append('<blockquote class="layui-elem-quote layui-quote-nm">'+base64s+'</blockquote>');
        }else{
            console.log("base64为空");
        }
        return false;
    });

    //清空
    form.on('submit(reset)', function(data){
        console.log("清空");
        // $("input,textarea").val("");
        $("#result").find("blockquote").remove();
        return false;
    });
    //常规用法
    laydate.render({
        elem: '#datetime001'
    });
});
</script>
</body>
</html>
